<template>
  <div class="info">
    <page-header type="page"></page-header>
    <div class="body">
      <div class="info-left">
        <el-carousel height="600px" direction="vertical" :autoplay="false">
          <el-carousel-item v-for="url in goodsInfo.goodsImgList" :key="url">
            <img :src="url" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="info-right">
        <div class="spice-product-purchas-wrap">
          <div class="spice-product-purchas">
            <h1 class="spice-product-name">
              {{ goodsInfo.goodsName
              }}<a class="spice-collection e-collection"
                ><i class="spice-icon spice-icon-collection"></i
              ></a>
            </h1>

            <div class="spice-product-price">
              <span class="goods-price">￥{{ goodsInfo.goodsPrice }}</span>
            </div>
            <div class="number">
              <div class="text">商品数目</div>
              <el-input-number
                v-model="goodsNum"
                :min="1"
                label="商品数目"
              ></el-input-number>
            </div>
            <div class="spice-product-info-wrapper">
              <div class="spice-product-description-small">
                <p class="spice-shipping-info">
                  <span>有货</span>预计发货后2-4个工作日送达
                </p>
                <p class="spice-shipping-info">
                  <span>介绍</span>{{ goodsInfo.goodsInfo }}
                </p>
                <a class="spice-btn" @click="addCard">加入购物袋</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "info",
  data() {
    return {
      goodsNum: 0,
      goodsId: -1,
      goodsInfo: {},
    };
  },
  created() {
    this.goodsId = this.$route.query.goodsId;
    this.goodsNum = this.$store.getters.getGoodsInfo(this.goodsId);
    this.$api
      .getGoodsById({
        goodsId: this.goodsId,
      })
      .then((res) => {
        if (res.code) {
          this.goodsInfo = res.data;
        }
      });
  },
  methods: {
    addCard() {
      this.$store.dispatch("unshiftShoppingCart", {
        goodsId: this.goodsInfo.goodsId,
        goodsName: this.goodsInfo.goodsName,
        goodsImg: this.goodsInfo.goodsImg, // 商品图片
        goodsPrice: this.goodsInfo.goodsPrice, // 商品价格
        num: this.goodsNum,
        check: false,
      });
      this.$successMsg("加入购物车成功");
    },
  },
};
</script>

<style lang="scss">
.info {
  background-color: rgb(231, 231, 231);
  padding-top: 150px;
  .body {
    display: flex;
    padding: 60px 80px;
    .info-right {
      width: 50%;
      padding: 0px 60px;
      .spice-product-purchas-wrap {
        .number {
          display: flex;
          align-items: center;
          /* justify-content: space-evenly; */
          margin-top: 30px;
          margin-bottom: 30px;
          .text {
            color: #666;
            font: 14px;
            margin-right: 30px;
          }
          .el-input-number .el-input__inner {
            background-color: transparent;
          }
          .el-input-number__increase,
          .el-input-number__decrease.is-disabled,
          .el-input-number__increase.is-disabled,
          .el-input-number__decrease {
            background-color: transparent;
          }
        }
        .spice-product-purchas {
          max-width: 306px;
          margin-right: 76px;
          margin-left: 6px;
          margin-top: 60px;
          .spice-product-name {
            font-family: FuturaLT-Light, STHeiti Light, Droid Sans Fallback,
              Microsoft YaHei, SimHei, Heiti SC;
            font-size: 20px;
            color: #1b1b1b;
            letter-spacing: 2px;
            position: relative;
            margin-top: 7px;
            padding-right: 20px;
            font-weight: 300;
            .spice-collection {
              position: absolute;
              top: 1px;
              right: 0;
              font-size: 0;
            }
          }
          .spice-product-price {
            font-family: FuturaLT-Light, GucciChinese;
            font-size: 20px;
            color: #4b4b4b;
            letter-spacing: 1px;
            margin-top: 7px;
            border-bottom: 1px solid #c8c6c5;
            padding-bottom: 16px;
          }
          .spice-product-info-wrapper {
            margin-top: 12px;
            .spice-product-description-small {
              .spice-btn {
                margin-top: 60px;
                background: #1b1b1b;
                border: 2px solid #1b1b1b;
                color: #e5dfd9;
                margin-top: 80px;
                width: 100%;
                display: inline-block;
                zoom: 1;
                font-weight: 400;
                vertical-align: middle;
                min-width: 128px;
                padding: 0 5px;
                height: 40px;
                line-height: 36px;
                font-size: 12px;
                text-align: center;
              }
              .spice-shipping-info {
                font-family: FuturaLT-Book, GucciChinese;
                font-style: italic;
                font-size: 12px;
                color: #666;
                margin-top: 25px;
                line-height: 1.6;
                span {
                  font-size: 12px;
                  color: #000;
                  letter-spacing: 0;
                  line-height: 12px;
                  display: block;
                  margin-bottom: 10px;
                  font-style: normal;
                }
              }
            }
          }
        }
      }
    }
    .info-left {
      padding: 0px 60px;
      width: 60%;
      .el-carousel__indicator--vertical .el-carousel__button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      .el-carousel__indicators--vertical {
        left: 0;
        right: auto;
      }
    }
  }
}
</style>